<template>
  <div>
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="轮播图类型">
        <el-select
          v-model="condition"
          placeholder="排序条件"
          @change="changeCondition"
        >
          <el-option label="手机端" value="app"></el-option>
          <el-option label="pc端" value="pc"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <!-- 按钮组件 -->
    <el-button
      type="primary"
      icon="el-icon-plus"
      style="margin: 10px"
      @click="showDialog"
      >添加新轮播图</el-button
    >
    <!-- 表格组件 
  data   是将来还表格组件将要展示的数据
  border  添加边框
  
  
  coloumn属性
  lable:显示的标题
  width:对应列的宽度
  align:对齐方式
  prop:对应列内容的字段名

  注意elementUI当中table组件展示的数据是以一列一列进行展示的
  直接在el-table里  用data=""将数据放进去，不需要v-for  而且里面直接写数据名字，不需要a.b之类的写法
  -->
    <el-table style="width: 100%" border :data="list">
      <el-table-column prop="id" label="轮播图编号" width="80px" align="cneter">
      </el-table-column>
      <el-table-column prop="imageurl" label="轮播图图片" width="width">
        <!-- row回传每一行的数据 $index每一个数据响应的索引值    这两个名字是固定的，不能更改-->
        <template #default="scope">
          <el-image
            v-if="`${scope.row.img}` != ''"
            style="width: 200px; height: 100px; margin-bottom: -4px"
            :src="`http://114.132.214.60:8080/blog/cat?img=${scope.row.imageurl}`"
          >
          </el-image>
          <p v-else>未设封面</p>
        </template>
      </el-table-column>
      <el-table-column prop="type" label="博客状态" width="300">
        <template #default="scope">
          <p v-show="`${scope.row.type}` == 1">pc端</p>
          <p v-show="`${scope.row.type}` == 2">手机端</p>
        </template>
      </el-table-column>
      <el-table-column prop="prop" label="操作" width="width">
        <template slot-scope="{ row, $index }">
          <el-button
            type="danger"
            icon="el-icon-delete"
            size="mini"
            @click="dele(row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 对话框 
    :visible.sync  控制对话框显示与隐藏
    -->

    <el-dialog title="添加轮播图" :visible.sync="dialogFormVisible">
      <!-- form表单元素  -->
      <!-- model将表单数据收集到指定的对象身上，将来的表单验证也需要这个属性 -->
      <!-- Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并 Form-Item 的 prop 属性设置为需校验的字段名即可。校验规则参见 async-validator -->
      <el-form style="width: 80%" :model="tmForm" :rules="rules" ref="ruleForm">
        <el-form-item label="轮播图类型">
          <el-select
            v-model="imgtype.type"
            placeholder="类型"
            @change="changeCondition1"
          >
            <el-option label="手机端" value="2"></el-option>
            <el-option label="pc端" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="轮播图图片" prop="url">
          <!-- 收集数据这里不能使用v-model，因为不是表单元素
          action：设置图片上传的地址
          :on-success 可以检测到图片是否上传成功，上传成功会执行一次
          before-upload  图片上传之前执行一次
          -->
          <el-upload
            ref="upload"
            name="upload"
            :data="imgtype"
            class="avatar-uploader"
            action="http://114.132.214.60:8080/banner/admin/add"
            :show-file-list="false"
            :auto-upload="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
            :on-progress="progre"
            :on-change="imgSaveToUrl"
            :on-error="err"
          >
            <img v-if="imgsrc" :src="imgsrc" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            <!-- 提示语 -->
            <div slot="tip" class="el-upload__tip">上传的文件不大于20mb</div>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="AddorUpdate">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "tradeMark",
  data() {
    return {
      // 本地图片的地址
      imgsrc:"",
      imgtype:{
        type:""
      },
      condition:"手机端",

      //列表展示的数据
      list: [],
      //对话框显示与隐藏的属性
      dialogFormVisible: false,
      //收集品牌信息,对象身上的属性，要根据接口写 
      tmForm: {
        tmName: "",
        url: "",
      },
      //表单验证的规则
      rules: {
        //品牌名称的验证规则
        /* 
            required：必须要校验的字段   trigger：用户行为，在什么情况下触发比如blur，change（就是放事件的的地方）   min，max长度  
            message：提示信息
            */
        tmName: [
          { required: true, message: "请输入品牌的名称", trigger: "blur" },
        ],
        //品牌logo的验证规则
        url: [{ required: true, message: "请放入品牌的图片" }],
      },
    };
  },
  //组件一改挂载完毕就发请求
  mounted() {
    this.getAppList()
  },
  methods: {
     // 选择新的条件
    changeCondition1(e){
      this.imgtype.type=e
    },
    imgSaveToUrl(event){
      /*另外一种本地预览方法 */
         let URL = window.URL 
          window.webkitURL;
          this.imgsrc = URL.createObjectURL(event.raw);
          
    },
    progre(e){
      console.log(e);
    },
    // 选择新的条件
    changeCondition(e){
      if(e=='app'){
        this.getAppList()
      }else{
        this.getPcList()
      }
    },
    async getAppList(){
        const result=await this.$API.banner.getBannerApp()
        console.log(result);
        if(result.code==200){
            this.list=result.data
            console.log(this.list);
        }
    },

    async getPcList(){
        const result=await this.$API.banner.getBannerPc()
        console.log(result);
        if(result.code==200){
            this.list=result.data
            console.log(this.list);
        }
    },
    
    //点击添加品牌的按钮
    showDialog() {
      this.dialogFormVisible = true;

      //清理tmForm里的数据，防止因为之前数据存余
      this.tmForm = { tmName: "", url: "" };
    },

    //修改
    updateTradeMark(row) {
      this.dialogFormVisible = true;
      this.tmForm = { ...row };
    },

    //下面为上传图片相关的回调
    handleAvatarSuccess(res, file) {
      //res是上传成功后返回给前端的数据
      //file也是上传成功后服务器返回给前端的数据

      //收集品牌数据，因为将来需要带给服务器
      this.tmForm.url = res.data;

            this.$message({
              type: "success",
              message: "添加成功",
            })


            //重新获取
               if(this.condition=='手机'){
                 this.getAppList()
             }else{
            this.getPcList()
             }
              this.dialogFormVisible = false;
              this.imgtype.type=""
              this.imgsrc=""
    },
    beforeAvatarUpload(file) {
      console.log(file)
    },

    //添加合删除的集合
    AddorUpdate() {
      if(this.imgsrc==""){
            return this.$message({
          message: "为放入图片",
          type: 'warning'
        });
      }

      if(this.imgtype.type==""){
        return this.$message({
          message: "为选择图片的类型",
          type: 'warning'
        });
      }

     this.$refs.upload.submit()
          
    },
    // 上传失败的回调
    err(){
         this.$message({
              type: "error",
              message: "添加失败",
            })
    },

    //删除
    dele(row) {
      //弹框
      this.$confirm(`确定删除这个?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
          //点击删除的时候触发
          //想服务器发送请求
          let result = await this.$API.banner.delBanner(row.id);
          //如果删除成功
          if (result.code == 200) {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
                //重新获取
               if(this.condition=='手机端'){
                 this.getAppList()
             }else{
            this.getPcList()
             }
          
            
          }
        })
        .catch(() => {
          //取消的时候触发
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>